<template>
  <div class="login-container">
    <div class="login-wrap clearfix">
      <div v-if="!isQR" class="phone-wrap">
        <div class="title-container">
          <h3 class="title">手机登录</h3>
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
          <el-form-item prop="phone">
            <el-input
              ref="phone"
              v-model="loginForm.phone"
              placeholder="请输入手机号"
              name="phone"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="loginForm.smsCode"
              name="smsCode"
              type="text"
              tabindex="2"
              placeholder=""
            >
              <el-button slot="append" :disabled="smsCodeCount.isClick" type="primary" plain @click="bandCountDown">
                {{ smsCodeCount.content }}
              </el-button>
            </el-input>
          </el-form-item>

          <el-button class="btn" style="width:100%;" type="primary" :loading="loading" @click.native.prevent="handleLogin">
            登&nbsp;&nbsp;录
          </el-button>

         <!-- <el-button class="btn" style="width:100%;" type="primary" :loading="loading" plain @click.native.prevent="changeLoginMode">
            微信扫码登录
          </el-button> -->

        </el-form>

      </div>

      <div v-else class="QRcode-wrap">
        <div class="QRcode">
          <wx-login
            appid="wx3ae6a59abf179e7a"
            scope="snsapi_login"
            redirect-uri="/"
            state=""
            href=""
          />
        </div>
        <div class="title">微信扫码登录</div>
        <div class="btn">
          <el-button class="btn" style="width:100%;" type="primary" :loading="loading" plain @click.native.prevent="changeLoginMode">
            手机号登录
          </el-button>
        </div>
      </div>
    </div>

    <div class="footer">
      <p class="fs-12 text-center">
        Copyright © 2020 阅师
        <a href="http://beian.miit.gov.cn" target="_blank">粤ICP备20020070号</a>
      </p>
    </div>
  </div>
</template>

<script>
// import { validUsername }  from '@/utils/validate'
import wxLogin from '@/components/WXLogin/vue-wxlogin'
import setToken from '@/utils/auth'
import { mapMutations } from 'vuex'
import { smsSendCode } from '@/api/basic'

export default {
  name: 'Login',
  components: {
    wxLogin
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else {
        callback()
      }
    }
    return {
      isQR: false,
      loginForm: {
        phone: '',
        smsCode: ''
      },
      smsCodeCount: {
        content: '获取验证码',
        countDownTime: 60,
        isClick: false
      },
      loginRules: {
        phone: [{ required: true, trigger: 'blur', validator: validateUsername }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations({
      setToken: 'SET_TOKEN'
    }),
    changeLoginMode() {
      this.isQR = !this.isQR
    },
    async handleLogin() {
      try {
        await this.$store.dispatch('user/login', this.loginForm)
        this.$router.push('/')
      } catch (err) {
        throw new Error(err)
      }
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     this.$store.dispatch('user/login', this.loginForm).then(() => {
      //       this.$router.push('/')
      //       this.loading = false
      //     }).catch(() => {
      //       this.loading = false
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    async bandCountDown() {
      if (this.smsCodeCount.isClick) return
      const params = {
        bizTypeEnums: '验证码登录',
        phone: this.loginForm.phone
      }
      await smsSendCode(params)
      this.smsCodeCount.isClick = true
      const wtime = setInterval(() => {
        this.smsCodeCount.countDownTime--
        this.smsCodeCount.content = this.smsCodeCount.countDownTime + '后重新发送'
        if (this.smsCodeCount.countDownTime < 0) {
          this.smsCodeCount.content = '获取验证码'
          this.smsCodeCount.countDownTime = 60
          this.smsCodeCount.isClick = false
          clearInterval(wtime)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
  $bg: #f0f2f5;
  $dark_gray: #889aa4;
  $light_gray: #BBBDBF;

  .login-container {
    height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    position: relative;
    background-image: url("../../assets/images/bg.png");
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;

    .login-wrap {
      width: 696px;
      height: 100%;
      margin-left: auto;
      position: relative;

      .phone-wrap {
        position: absolute;
        top: 50%;

        margin-top: -219px;
        right: 15%;
        width: 400px;
        height: 438px;
        box-sizing: border-box;
        overflow: hidden;
        background: $bg;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
        border: 1px solid $light_gray;
        border-radius: 8px;

        .title-container {
          width: 100%;
          height: 54px;
          .title {
            line-height: 54px;
            font-size: 20px;
            color: #000000;
            text-align: center;
            border-bottom: 1px solid $light_gray;
          }
        }

        & /deep/ .login-form {
          padding: 20px 40px 40px 40px;
          .el-form-item {
            border-bottom: 1px solid $light_gray;
            padding: 20px 0;
          }
          .el-form-item__content,
          .el-input {
            height: 24px;
          }
          .el-input__inner {
            background-color: $bg;
            border: none;
            height: 24px;
            line-height: 24px;
            font-size: 16px;
          }
          .el-button.el-button--primary.is-plain {
            color: #54B87B;
            border: 1px solid #54B87B;
            background: $bg;
            &:hover {
              color: #54B87B;
              border: 1px solid #54B87B;
              background: $bg;
            }
          }
          .el-button + .el-button {
            margin-left: 0;
          }
          .btn {
            margin-top: 20px
          }
        }
      }

      .QRcode-wrap {
        position: absolute;
        z-index:500;
        top: 50%;
        margin-top: -219px;
        right: 15%;
        width: 400px;
        height: 438px;
        padding: 0 40px;
        box-sizing: border-box;
        overflow: hidden;
        .QRcode {
          display: block;
          width: 304px;
          height: 304px;
          margin: 0 auto;
        }
        .title {
          font-size: 16px;
          color: #000;
          text-align: center;
          line-height: 24px;
          margin-top: 36px;
          margin-bottom: 32px;
        }
        .btn {
          width: 304px;
          margin: 0 auto;
        }
      }
    }

    .footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100px;
      padding-top: 40px;
      a:hover {
        color: #1665D8;
      }
    }
  }
</style>
